<template lang="pug">
  .global-container
    .global-container-header
      .title 新增菜单
    .global-container-content.global-container-operate
      .operate-content
        .operate-content-body
          .operate-content-header 主菜单信息
          .flex-row
            .left-header
              span.necessary *
              | 菜单组名称:
            input(:class="{'row-error-border': menuNameError}", placeholder="请输入菜单组名称", v-model="menuName")
            .row-error-tip(v-if="menuNameError") 菜单组名称不能为空!
          .flex-row
            .left-header
              span.necessary *
              | 菜单组图标:
            input(:class="{'row-error-border': menuIconError}", placeholder="请输入菜单组图标", v-model="menuIcon")
            .row-error-tip(v-if="menuIconError") 菜单组图标不能为空!
          .flex-row
            .left-header
              | 菜单组顺序:
            input(placeholder="请输入菜单组顺序", v-model="showNo")
        .operate-content-body
          .operate-content-header 子菜单信息
          .menu-info(v-for="(item, index) in menuInfoList")
            .flex-row
              .left-header
                span.necessary *
                | 菜单名称:
              input(:class="{'row-error-border': item.menuNameError}", placeholder="请输入菜单名称", v-model="item.menuName", @input="change(index)")
              .operate-icons.theme-color
                i.iconfont.icon-xiangxiapaixu(v-if="index !== menuInfoList.length - 1", @click="moveDown(index)")
                i.iconfont.icon-xiangshangpaixu(v-if="index !== 0", @click="moveUp(index)")
                i.iconfont.icon-shanchu(v-if="menuInfoList.length > 1", @click="deleteMenu(index)")
              .row-error-tip(v-if="item.menuNameError") 菜单名称不能为空!
            .flex-row
              .left-header
                span.necessary *
                | 菜单路径:
              input(placeholder="请输入菜单路径,/+路径名", v-model="item.path")
          .btn.btn-add.menu-add(@click="addMenu") 新增子菜单
      .operate-btn
        .btn.btn-cancel(@click="$router.push('/menu')") 取消
        .btn.btn-save(@click="save") 保存
</template>

<script>
export default {
  data () {
    return {
      menuGroupId: this.$route.params.id,
      menuName: '',
      menuIcon: '',
      showNo: '',
      menuInfoList: [{
        menuName: '',
        path: '',
        showNo: ''
      }],
      menuNameError: false,
      menuIconError: false
    }
  },
  methods: {
    async save () {
      if (!this.menuName) {
        this.menuNameError = true
        return
      }
      if (!this.menuIcon) {
        this.menuIconError = true
        return
      }
      for (let i = 0; i < this.menuInfoList.length; i++) {
        let menu = this.menuInfoList[i]
        if (!menu.menuName) {
          menu.menuNameError = true
          this.menuInfoList.push()
          return
        }
      }
      this.menuInfoList.forEach((menuInfo, index) => {
        menuInfo.showNo = index
      })
      const uri = this.menuGroupId ? 'update-menu' : 'save-menu'
      const {code} = (await this.$http.post(`/manage/menu-group/${uri}`, {
        menuGroupId: this.menuGroupId,
        menuName: this.menuName,
        menuIcon: this.menuIcon,
        showNo: this.showNo,
        menuInfoList: this.menuInfoList
      })).data
      if (code === 0) {
        this.$store.set('dialog/blackInfo', {
          show: true,
          text: '保存成功'
        })
        this.menuFlush()
        setTimeout(() => {
          this.$router.push('/menu')
        }, 2000)
      }
    },
    menuFlush () {
      this.$store.set('base/menuFlush', true)
    },
    addMenu () {
      this.menuInfoList.push({
        menuName: '',
        path: '',
        showNo: ''
      })
    },
    change (index) {
      this.menuInfoList[index].menuNameError = false
      this.menuInfoList.push()
    },
    moveDown (index) {
      [this.menuInfoList[index], this.menuInfoList[index + 1]] = [this.menuInfoList[index + 1], this.menuInfoList[index]]
      this.menuInfoList.push()
    },
    moveUp (index) {
      [this.menuInfoList[index], this.menuInfoList[index - 1]] = [this.menuInfoList[index - 1], this.menuInfoList[index]]
      this.menuInfoList.push()
    },
    deleteMenu (index) {
      this.menuInfoList.splice(index, 1)
    },
    async init () {
      const {data} = (await this.$http.post(`/manage/menu-group/init-menu-group/${this.menuGroupId}`)).data
      Object.assign(this, data)
    }
  },
  watch: {
    menuName () {
      this.menuNameError = false
    },
    menuIcon () {
      this.menuIconError = false
    }
  },
  validator: {
    showNo: {
      integer: true,
      maxValue: 100
    }
  },
  mounted () {
    if (this.menuGroupId) {
      this.init()
    }
  }
}
</script>

<style scoped lang="stylus">
  .menu-info
    border-bottom 1px solid #e3e3e3
  .menu-add
    width 100px
    margin-top 15px
  .operate-icons
    > :first-child
      margin-left 15px
    > i
      margin-right 8px
      cursor pointer
</style>
